<template>

  <div>
    <el-container>
      <el-container>
        <el-header>

          <el-dialog title="添加消息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="消息人id" :label-width="formLabelWidth">
                <el-input v-model="form.id" ></el-input>
              </el-form-item>
              <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input v-model="form.date" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="消息人姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="内容" style="padding-left: 50px">
                <textarea v-model="form.content" style="width: 400px" ></textarea>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="commitForm(1)">确 定</el-button>
            </div>
          </el-dialog>


          <el-dialog title="修改信息" :visible.sync="up_dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="消息人id" :label-width="formLabelWidth">
                <el-input v-model="form.id" ></el-input>
              </el-form-item>
              <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input v-model="form.date" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="消息人姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="内容" style="padding-left: 50px">
                <textarea v-model="form.content" style="width: 400px" ></textarea>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="up_dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="commitForm(2)">确 定</el-button>
            </div>
          </el-dialog>


          <el-row >
          <div class="op-row">
            <div CLASS="stu-allbtns">
              <el-button type="success" @click="dialogFormVisible = true">添加按钮</el-button>
              <el-button :disabled="up" @click="toUpdate" type="warning">修改按钮</el-button>
              <el-button :disabled="del" @click="toDel" type="danger">删除按钮</el-button>
            </div>
            <div class="stu-search">
              <el-input v-model="search" placeholder="输入关键字"></el-input>
              <el-select  v-model="classed" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-button icon="el-icon-search" circle @click="searchByCondition"></el-button>
            </div>
          </div>

        </el-row>
        </el-header>
        <el-main>
          <el-table  @row-click="handleRowChange" max-height="490" ref="multipleTable"
                     @selection-change="handleSelectionChange" tooltip-effect="dark"
                     :data="contactList"
                     style="width: 100%; cursor:pointer;" :row-class-name="tableRowClassname">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="消息人id" width="180" sortable> </el-table-column>
            <el-table-column prop="date" label="日期" width="180" sortable> </el-table-column>
            <el-table-column prop="name" label="消息人姓名" width="180" sortable> </el-table-column>
            <el-table-column prop="content" label="消息内容" width="700" sortable> </el-table-column>
          </el-table>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>


</template>
<script>
    export default {
      data() {
        return {
          input: '',
          up:false,
          del:false,
          dialogFormVisible: false,
          up_dialogFormVisible: false,
          classed: [],
          multipleSelection1: [],
          vle: 0,
          search: '',
          formLabelWidth: '120px',
          form: {
            id:'',
            date:'',
            name:'',
            content:''
          },
          contactList: [{
            id:'1',
            date: '2016-05-02',
            name: '王小虎',
            content: '上海市普陀区金沙江路 1518 弄'
          }, {
            id:'2',
            date: '2016-05-04',
            name: '王小虎',
            content: '上海市普陀区金沙江路 1517 弄'
          }, {
            id:'3',
            date: '2016-05-01',
            name: '王小虎',
            content: '上海市普陀区金沙江路 1519 弄'
          },
            {
              id:'4',
              date: '2016-05-01',
              name: '王小虎',
              content: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id:'5',
              date: '2016-05-01',
              name: '王小虎',
              content: '上海市普陀区金沙江路 1519 弄'
            },
            {
              id:'6',
              date: '2016-05-01',
              name: '王小虎',
              content: '上海市普陀区金沙江路 1519 弄'
            },{
            id:'7',
            date: '2016-05-03',
            name: '王小虎',
            content: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
   methods:{
     handleRowChange(row, event, column){
       console.log(row.stuId)
       this.$router.push({ name: "hwinfo", params: { id:row.stuId } });
     },handleSelectionChange(val) {
       this.multipleSelection1 = val;
     },tableRowClassname({row, rowIndex}) {
       if (rowIndex % 2 === 1) {
         return 'warning-row';
       } else if (rowIndex % 2 === 0) {
         return 'success-row';
       }
       return '';
     },
         toDel() {
       if (this.multipleSelection1.length > 0) {
         this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           var ids = [];
           this.multipleSelection1.forEach(item => {
             ids.push(item.id)
           });
           // console.log(ids.join(","))
           //删除请求

           console.log(ids.join(","))
           this.$http
             .get("http://localhost:8888/contacts/delContacts?id="+ids.join(","))
             .then(result => {
               if (result.body.status === 0) {
                 this.classed = result.body.message;
               }
             });


           //重新查一遍回显，lastRequest,再发一遍
           this.contactList.splice()
           this.getContactList()
           this.$message({
             type: 'success',
             message: '删除成功!'
           });
         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         });

       } else {
         this.$message({
           type: 'error',
           message: '请勾选你需要删除的选项~'
         });
       }
     },toUpdate() {
       if (this.multipleSelection1.length !== 1) {
         this.$message({
           type: 'error',
           message: '每次只能修改一项哦~'
         });
       } else {
         this.tempId = this.multipleSelection1[0].id
         this.form = this.multipleSelection1[0];
         this.up_dialogFormVisible = true
         console.log(this.multipleSelection1[0].name)
       }
     },searchByCondition() {
       var idArr = [];
       this.classed.forEach(item => {
         idArr.push(item)
       })
       console.log(idArr.join(","))

       this.$http
         .get("http://localhost:8888/contacts/getContactsAll/")
         .then(result => {
           if (result.body.status === 0) {
             console.log("OK")
             this.contactList = result.body.message;
           }
         });
     },getContactList() {
       // this.$http
       //   .get("api/getContactsAll?pageIndex=" + this.pageIndex)
       //   .then(result => {
       //     if (result.body.status === 0) {
       //       // console.log("OK")
       //       this.contactList = this.contactList.concat(result.body.message);
       //     }
       //   });
       this.$http
         .get("http://localhost:8888/contacts/getContactsAll")
         .then(result => {
           console.log(result);
        this.classed = result
       });

     },commitForm(val) {
       this.options.some(item=>{
         if(item.value=== this.form.belong){
           this.form.belong = item.label
         }
       })
       if (val === 1) {
         this.dialogFormVisible = false
         this.contactList.unshift(this.form)
         //添加请求
         //重发上一次的请求，查

         this.$http.post("http://localhost:8888/contacts/insertConcats?uid="+this.form.id+"&ctime="+this.form.date+"&linkname="+this.form.name
           +"&content="+this.form.content)
           .then(function(data){

             console.log(data)

           }).catch(function(){
           console.log("服务器异常！");
         });

         this.$message({
           type: 'success',
           message: '添加成功'
         });
         this.getContactList()

       } else {
         this.up_dialogFormVisible = false//清空from

         this.$http.post("http://localhost:8888/contacts/updateContacts?uid="+this.form.id+"&ctime="+this.form.date
           +"&linkname="+this.form.name+"&content="+this.form.content)
           .then(function(data){
             this.$message({
               type: 'success',
               message: '修改成功'
             });
             console.log(data)

           }).catch(function(){
           console.log("服务器异常！");
         });

         this.$message({
           type: 'success',
           message: '修改成功'
         });
       }
     },

     mounted() {
       this.getContactList()
     },
       watch: {
         dialogFormVisible: function (newVal, oldVal) {
           // console.log("newVal:" + newVal + "   oldVal:" + oldVal)
           if (!newVal) {
             // console.log("修改")
             this.form = {
               id: '',
               date: '',
               name:'',
               content:''
             }
           }
         },up_dialogFormVisible:function (newV,oldV) {
       if (!newV) {
         this.form = {
           id: '',
           date: '',
           name:'',
           content:''
         }
       }
     }


       }
     }
    }
</script>
<style  scoped>
  .op-row{
    padding: 10px;
    display: flex;
    justify-content: space-between;



  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;

  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
